<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加菜单</title>
<link rel="stylesheet" href="../../../css/Semantic/semantic.min.css" />
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="../../../layui/layui.js"></script>
<script src="../../../js/vue/vue.js"></script>
<script src="../../../js/vue/axios.min.js"></script>

<style type="text/css">
	.zth-container{
		margin-top:60px;
		margin-left:30%;
		width: 350px;
	}
	.zth-container-but{
		text-align: center;
		margin-top: 20px;
		margin-left: 10px;
	}
</style>
</head>
<body>
	<div id="app">
		<div class="zth-container">
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">菜单名</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="title"
						autocomplete="off"  v-model="menu_name" placeholder="请输入菜单名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">菜单路径</label>
				<div class="layui-input-block">
					<input type="text" lay-verify="title"
						autocomplete="off"  v-model="url" placeholder="请输入菜单路径" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">图标</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="title"
						autocomplete="off"  v-model="icon" placeholder="请输入layui图标" class="layui-input">
				</div>
			</div>
			
			<div class="zth-container-but">
				<button type="button" class="layui-btn" @click="add">提交</button>
				<button type="button"  class="layui-btn layui-btn-primary" id="close" onclick="close()">关闭</button>
			 </div>
		</div>
	</div>
	<script src="../../../js/jquery.min.js"></script>
	<script type="text/javascript">
	
	new Vue({
		
		el:'#app',
		data(){
			return{
				menu_name:'',
				url:'',
				icon:''
			}
		},
		methods:{
			add:function(){
				//特殊字符
				 var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
				if(
						this.menu_name!=''&&!flag.test(this.menu_name
				)){
					var params =new URLSearchParams();
					params.append('menu_name',this.menu_name);
					params.append('url',this.url);
					params.append('icon',this.icon);
					axios.post('/menu/add',params).then(res=>{
						console.log(res);
						if(res.data>0){
							succeed();
						}else{
							alert("失败");
						}
						
					},err=>{
						console.log(err);
					})
				}else{
					alert("添加不能出现特殊字符空格和不能为空！");
				}
				
				
				
			}
		}
	});
	//操作成功
	function succeed() {
		layui.use(['form', 'jquery'], function() {
			layer.alert("添加成功！", function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
			});
		});
	}
	
	//关闭
	layui.use(['form', 'jquery'], function() {
		var $=layui.jquery
	  $("#close").on('click',function(){
		layui.use(['form', 'jquery'], function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
		});
	});
	
	});
	</script>
</body>
</html>